<!DOCTYPE html>
<html ng-app="demo">
<head>
    <meta charset="utf-8">
    <title>UI - Free Bootstrap Framework and Theme</title>
    <meta name="description" content=""/>
    <!-- Loading Bootstrap -->

    <link href="css/bootstrap.css" rel="stylesheet">
    <link href="css/base.css" rel="stylesheet">
    <link href="css/layout.css" rel="stylesheet">
    <link href="css/modules.css" rel="stylesheet">
    <link href="css/state.css" rel="stylesheet">
    <link href="css/theme.css" rel="stylesheet">

    <link href="css/index.css" rel="stylesheet">
    <link href="css/ui-button.css" rel="stylesheet">
    <link href="css/ui-checkbox.css" rel="stylesheet">
    <link href="css/ui-input.css" rel="stylesheet">
    <link href="css/ui-dropdown.css" rel="stylesheet">
    <link href="css/ui-select.css" rel="stylesheet">
    <link href="css/ui-suggest.css" rel="stylesheet">
    <link href="css/ui-datepicker.css" rel="stylesheet">
    <link href="css/ui-carousel.css" rel="stylesheet">
    <link href="css/ui-grid.css" rel="stylesheet">
    <link href="css/ui-scrollbar.css" rel="stylesheet">
    <link href="css/ui-tree.css" rel="stylesheet">
    <link href="css/ui-tab.css" rel="stylesheet">
    <link href="css/ui-dialogs.css" rel="stylesheet">

    <link href="css/ui-input-select.css" rel="stylesheet">

    <link href="css/button-theme-default.css" rel="stylesheet">
    <link href="css/checkbox-theme-default.css" rel="stylesheet">
    <link href="css/input-theme-default.css" rel="stylesheet">
    <link href="css/dropdown-theme-default.css" rel="stylesheet">
    <link href="css/select-theme-default.css" rel="stylesheet">
    <link href="css/suggest-theme-default.css" rel="stylesheet">
    <link href="css/datepicker-theme-default.css" rel="stylesheet">
    <link href="css/carousel-theme-default.css" rel="stylesheet">
    <link href="css/grid-theme-default.css" rel="stylesheet">
    <link href="css/scrollbar-theme-default.css" rel="stylesheet">
    <link href="css/tree-theme-default.css" rel="stylesheet">
    <link href="css/tab-theme-default.css" rel="stylesheet">
    <link href="css/dialogs-theme-default.css" rel="stylesheet">



    <script type="text/javascript" src="lab/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="lab/lodash.min.js"></script>
    <script type="text/javascript" src="lab/angular.js"></script>
    <script type="text/javascript" src="lab/angular-sanitize.js"></script>
    <script type="text/javascript" src="lab/angular-translate.js"></script>
    <script type="text/javascript" src="lab/ui.bindHtml.js"></script>
    <script type="text/javascript" src="lab/ui.js"></script>
    <script type="text/javascript" src="lab/ui.dateparser.js"></script>
    <script type="text/javascript" src="lab/ui.position.js"></script>
    <script type="text/javascript" src="lab/ui.transition.js"></script>
    <script type="text/javascript" src="lab/ui.modal.js"></script>
    <script type="text/javascript" src="lab/ui.buttons.js"></script>
    <script type="text/javascript" src="lab/ui.checkbox.js"></script>
    <script type="text/javascript" src="lab/ui.dropdown.js"></script>
    <script type="text/javascript" src="lab/ui.select.js"></script>
    <script type="text/javascript" src="lab/ui.datepicker.js"></script>
    <script type="text/javascript" src="lab/ui.timepicker.js"></script>
    <script type="text/javascript" src="lab/ui.dialogs.js"></script>
    <script type="text/javascript" src="lab/ui.tabs.js"></script>
    <script type="text/javascript" src="lab/ui.carousel.js"></script>
    <script type="text/javascript" src="lab/ui.tooltip.js"></script>
    <script type="text/javascript" src="lab/ui.grid.js"></script>
    <script type="text/javascript" src="lab/ui.scrollbar.js"></script>
    <script type="text/javascript" src="lab/ui.tree.js"></script>
    <script type="text/javascript" src="lab/ui.inputEdit.js"></script>
    <script type="text/javascript" src="lab/ui.collapse.js"></script>
    <script type="text/javascript" src="lab/ui.suggest.js"></script>

    <script type="text/javascript" src="lab/ui.inputSelect.js"></script>
    <script type="text/javascript" src="scripts/dropdown-example.js"></script>
    <!--<script type="text/javascript" src="scripts/tree-test-controll.js"></script>-->
</head>
<body>
    <div class="container">
    <!-- /demo-headline -->
        <div class="demo-headline">
            <h1 class="demo-logo">
                <div class="logo"></div>
                UED UI
                <xsall>Free User Interface Kit</xsall>
            </h1>
        </div>
        <h1 class="demo-section-title">Basic elements</h1>
        <!--this is button demo-->
        <h3 class="demo-panel-title">Buttons</h3>
        <div class="row demo-row">
            <div class="col-xs-3">
                <a href="#" class="btn  ui-btn ui-btn-primary">Primary Button</a>
            </div>
            <div class="col-xs-3">
                <a href="#" class="btn  ui-btn ui-btn-warning">Warning Button</a>
            </div>
            <div class="col-xs-3">
                <a href="#" class="btn  ui-btn ui-btn-default">Default Button</a>
            </div>
            <div class="col-xs-3">
                <a href="#" class="btn  ui-btn ui-btn-danger">Danger Button</a>
            </div>
        </div>
        <div class="row demo-row">
            <div class="col-xs-3">
                <a href="#" class="btn  ui-btn ui-btn-success">Success Button</a>
            </div>
            <div class="col-xs-3">
                <a href="#" class="btn  ui-btn ui-btn-inverse">Inverse Button</a>
            </div>
            <div class="col-xs-3">
                 <a href="#" class="btn  ui-btn ui-btn-info">Info Button</a>
            </div>
            <div class="col-xs-3">
                <a href="#" class="btn  ui-btn ui-btn-disabled">Disabled Button</a>
            </div>
        </div>

        <!--
        this is input demo
        -->
        <h3 class="demo-panel-title">Input</h3>
        <div class="row">
            <div class="col-xs-3">
                <div class="form-group">
                    <input type="text" value="" placeholder="Inactive" class="form-control ui-input">
                </div>
            </div>
            <div class="col-xs-3">
                <div class="form-group">
                    <input type="text" value="Disabled" disabled="disabled" class="form-control ui-input">
                </div>
            </div>
        </div>
        <!--
                    this is inputSelect demo
                    -->
        <h3 class="demo-panel-title">ui-input-edit</h3>
        <div class="row" ng-controller="inputEditCtrl">
            {{inputEditModel}}
            <div class="col-xs-5">
                <div class="ui-input-edit"
                     ui-input-edit
                     text="xx"
                     type="input"
                     ng-model="inputEditModel"
                     data="inputEditData"
                     key="text"
                     as-value="value"></div>
            </div>
        </div>

        <!--
            this is inputSelect demo
            -->
        <h3 class="demo-panel-title">ui-input-select</h3>
        <div class="row" ng-controller="inputSelectCtrl">
            <div class="col-xs-5">{{functionType}}
                <div class="ui-input-select" ui-input-select ng-model="functionType" data="ngModelList"  key="text" as-value="value" space="6"></div>
            </div>
        </div>
        <!--
        this is suggest demo
        -->
        <h3 class="demo-panel-title">ui.suggest</h3>
        <div class="row" ng-controller="suggestCtrl">
            <div class="col-xs-3">
                <div class="form-group">
                    <input type="text" 
                    ui-suggest 
                    ng-model="suggestSelect"
                    data="data"
                    key="key"
                    on-select="onSelect(self)"
                    class="form-control ui-input">
                </div>
            </div>
        </div>

        <!--
        this is dropdown demo
        -->
        <h3 class="demo-panel-title">Dropdown</h3>
        <div ng-controller="dropdownCtrl">
        <!-- Simple dropdown -->
            <span class="dropdown" dropdown on-toggle="toggled(open)">
                <a class="dropdown-toggle" dropdown-toggle>
                    Click me for a dropdown, yo!
                </a>
                <ul class="dropdown-menu">
                    <li ng-repeat="choice in items">
                        <a href>{{choice}}</a>
                    </li>
                </ul>
            </span>

            <!-- Single button -->
            <div class="btn-group ui-dropdown" dropdown is-open="status.isopen">
                <button type="button" class="btn btn-primary dropdown-toggle" dropdown-toggle ng-disabled="disabled">
                    Button dropdown <span class="caret"></span>
                </button>
                <ul class="dropdown-menu" role="menu">
                    <li><a href="#">Action</a></li>
                    <li><a href="#">Another action</a></li>
                    <li><a href="#">Something else here</a></li>
                    <!-- <li class="divider"></li>
                    <li><a href="#">Separated link</a></li>-->
                </ul>
            </div>

            <!-- Split button -->

            <div class="btn-group ui-dropdown" dropdown>
                <button type="button" class="btn btn-primary">Action</button>
                <button type="button" class="btn btn-primary dropdown-toggle" dropdown-toggle>
                    <span class="caret"></span>
                    <span class="sr-only">Split button!</span>
                </button>
                <ul class="dropdown-menu" role="menu">
                    <li><a href="#">Action</a></li>
                    <li><a href="#">Another action</a></li>
                    <li><a href="#">Something else here</a></li>
                    <!-- <li class="divider"></li>
                    <li><a href="#">Separated link</a></li>-->
                </ul>
            </div>

            <!-- Single button using append-to-body -->
            <div class="btn-group ui-dropdown" dropdown dropdown-append-to-body>
                <button type="button" class="btn btn-primary dropdown-toggle" dropdown-toggle>
                    Dropdown on Body <span class="caret"></span>
                </button>
                <ul class="dropdown-menu" role="menu">
                    <li><a href="#">Action</a></li>
                    <li><a href="#">Another action</a></li>
                    <li><a href="#">Something else here</a></li>
                    <!-- <li class="divider"></li>
                    <li><a href="#">Separated link</a></li>-->
                </ul>
            </div>
            <hr/>
            <p>
                <button type="button" class="btn ui-btn" ng-click="toggleDropdown($event)">Toggle button dropdown</button>
                <button type="button" class="btn btn-warning" ng-click="disabled = !disabled">Enable/Disable</button>
            </p>
        </div>

        <!--
        this is select demo
        -->
        <h3 class="demo-panel-title">Select</h3>
        <div ng-controller="selectCtrl" style="width:200px">
            <div
            ui-select
            default="choose"
            ng-model="selectDataId"
            options="selectData"
            key="text"
            as-value="value"
            width="100%"
            ></div>
        </div>

        <!--
        this is checkbox demo
        -->
        <h3 class="demo-panel-title">Checkbox</h3>
        <div ng-controller="checkboxCtrl">
            多选：{{checkedID}}
            <div ui-checkbox data="checkboxData" key="text" as-value="value" checked-data="checkedData" on-checked="onChecked(checkedID)"
                 multi="1" ng-model="checkedID" space="6" ></div>
            <br/>
            <br/>
            单选：{{checkedID2}}
            <div ui-checkbox data="checkboxData2" key="text" as-value="value" checked-data="checkedData" on-checked="onChecked(checkedID)"
                 multi="0" ng-model="checkedID2" space="6" ></div>
        </div>

        <!--
        this is datepicker demo
        -->
        <h3 class="demo-panel-title">Datepicker</h3>
        <form class="col-xs-12" ng-controller="datepickerCtrl" style="padding-left:0px;">
            <div class="col-xs-12">
                <lable class="pull-left" style="margin-top:5px; width: 100px;text-align:right;">年月日：</lable>
                <p class=" input-group ui-datapicker pull-left" style="width:200px; margin-right:100px; margin-bottom:10px;">
                    <input type="text"  class="form-control ui-input" datepicker-popup="yyyy-MM-dd" datepicker-milliseconds
                    ng-model="dateSelection" is-open="opened0" ng-click="opened0=1" show-weeks="true"/>
                    <span class="input-group-btn">
                    <button type="button" class="btn  btn-default" ng-click="$event.stopPropagation();opened0=1;"><i class="glyphicon glyphicon-calendar"></i></button>
                    </span>
                </p>
            </div>
            <div class="col-xs-12">
                <lable class="pull-left" style="margin-top:5px;width: 100px;text-align:right;">年月日时分秒：</lable>
                <p class="input-group ui-datapicker pull-left" style="width:200px; margin-bottom:10px">
                    <input type="text"  class="form-control ui-input" datepicker-popup="yyyy-MM-dd hh:mm:ss" close-on-date-selection="false" datepicker-milliseconds
                           ng-model="timeSelection" is-open="opened1" ng-click="opened1=1" show-weeks="true"/>
                    <span class="input-group-btn">
                    <button type="button" class="btn  btn-default" ng-click="$event.stopPropagation();opened1=1;"><i class="glyphicon glyphicon-calendar"></i></button>
                    </span>
                </p>
            </div>
            <div class="col-xs-12">
                <lable class="pull-left" style="margin-top:5px;width: 100px;text-align:right;">区间：</lable>
                <p class=" input-group ui-datapicker pull-left" style="width:200px;margin-right:10px;margin-bottom:10px;">
                    <input type="text"  class="form-control ui-input" datepicker-popup="yyyy-MM-dd" datepicker-milliseconds
                           ng-model="startDate" is-open="opened2" ng-click="opened2=1" show-weeks="true"/>
                    <span class="input-group-btn">
                    <button type="button" class="btn  btn-default" ng-click="$event.stopPropagation();opened2=1;"><i class="glyphicon glyphicon-calendar"></i></button>
                    </span>
                </p>
                <label class="pull-left">--</label>
                <p class="input-group ui-datapicker pull-left" style="width:200px;margin-left:10px;">
                    <input type="text"  class="form-control ui-input" datepicker-popup="yyyy-MM-dd" datepicker-milliseconds
                           ng-model="endDate" is-open="opened3" ng-click="opened3=1" show-weeks="true"/>
                    <span class="input-group-btn">
                    <button type="button" class="btn  btn-default" ng-click="$event.stopPropagation();opened3=1;"><i class="glyphicon glyphicon-calendar"></i></button>
                    </span>
                </p>
            </div>
        </form>
        <!--
        this is timepicker demo
        -->
        <h3 class="demo-panel-title">Timepicker</h3>
        <div class="row" ng-controller="timepickerCtrl">
            <timepicker ng-model="mytime" ng-change="changed()" hour-step="hstep" minute-step="mstep" show-meridian="ismeridian"></timepicker>
            <pre class="alert alert-info">Time is: {{mytime | date:'shortTime' }}</pre>
            <hr>
            <button class="btn btn-info" ng-click="toggleMode()">12H / 24H</button>
            <button class="btn ui-btn" ng-click="update()">Set to 14:00</button>
            <button class="btn btn-danger" ng-click="clear()">Clear</button>
        </div>

        <!--
            this is dialogs demo
        -->
        <h3 class="demo-panel-title">Dialogs</h3>
        <div class="row">
            <div class="col-xs-12" ng-controller="dialogsCtrl">
                <button class="btn ui-btn-danger ui-btn" ng-click="error()">Error Dialog</button>
                <button class="btn ui-btn-default ui-btn" ng-click="notify()">Notify Dialog</button>
                <button class="btn ui-btn-success ui-btn" ng-click="confirm()">Confirm Dialog</button>
                <button class="btn ui-btn-warning ui-btn" ng-click="custom()">Custom Dialog</button>
            </div>
        </div>

        <!--
            this is tabs demo
        -->
        <h3 class="demo-panel-title">Tabs</h3>
        <div class="col-xs-12 nav ui-tab-group" ng-controller="tabsCtrl">
            <div class="col-xs-12 nav-tabs">
                <div class="btn-group pull-left  " >
                    <label class="btn" ng-model="ng.tab" btn-radio="{{$index}}" ng-repeat="item in tabsData track by $index">{{::item.title}}</label>
                </div>
            </div>
            <div class="col-xs-12" ng-model="ng.tab" ng-repeat="item in tabsData track by $index">
                <p ng-if="ng.tab===item.value">{{::item.content}}</p>
            </div>
        </div>
        <!--
        this is ui-gird demo
        -->
      <!--
        this is carousel demo
      -->
        <h3 class="demo-panel-title">Carousel</h3>
        <div class="row">
          <div class="col-xs-12" ng-controller="carouselCtrl">
              <carousel interval="myInterval">
                  <slide ng-repeat="item in slides">
                        <form class="form-horizontal">
                          <div class="form-group">
                            <label class="col-xs-3 control-label">版本号:</label>
                            <div class="col-xs-3">
                              <p class="form-control-static">11111111111</p>
                            </div>
                            <label class="col-xs-2 control-label">发布人:</label>
                            <div class="col-xs-3">
                              <p class="form-control-static">111111111111</p>
                            </div>
                          </div>
                          <div class="form-group">
                            <label class="col-xs-3 control-label">版本特性:</label>
                            <div class="col-xs-9">
                              <p class="form-control-static">111111111111</p>
                            </div>
                            <label class="col-xs-3 control-label">影响:</label>
                            <div class="col-xs-9">
                              <p class="form-control-static">11111111111</p>
                            </div>
                          </div>
                          <div class="form-group">
                            <label class="col-xs-3 control-label">解决的问题:</label>
                            <div class="col-xs-9">
                              <p class="form-control-static">111111111111</p>
                            </div>
                          </div>
                        </form>
                  </slide>
              </carousel>
          </div>
        </div>
        <!--
            this is tooltip
        -->
        <h3 class="demo-panel-title">Tooltip</h3>
        <div class="col-xs-12" ng-controller="tooltipCtrl">
            <!--<div class="form-group">-->
                <!--<label>Dynamic Tooltip Text</label>-->
                <!--<input type="text" ng-model="dynamicTooltipText" class="form-control">-->
            <!--</div>-->
            <!--<div class="form-group">-->
                <!--<label>Dynamic Tooltip Popup Text</label>-->
                <!--<input type="text" ng-model="dynamicTooltip" class="form-control">-->
            <!--</div>-->
            <p>
                Pellentesque <a href="#" tooltip="{{dynamicTooltip}}"><!--{{dynamicTooltipText}}-->hover me</a>
            </p>
            <form role="form" class="tooltip-form">
                <div class="form-group">
                    <label>Or use custom triggers, like focus: </label>
                    <input type="text" value="Click me!" tooltip="See? Now click away..."  tooltip-trigger="focus" tooltip-placement="right" class="form-control" />
                </div>
                <div class="form-group">
                    <label>Disable tooltips conditionally:</label>
                    <input type="text" ng-model="inputModel" class="form-control"
                           placeholder="Hover over this for a tooltip until this is filled"
                           tooltip="Enter something in this input field to disable this tooltip"
                           tooltip-placement="top"
                           tooltip-trigger="mouseenter"
                           tooltip-enable="!inputModel" />
                </div>
            </form>
        </div>
        <!--
            this is Scrollbar demo
        -->
        <h3 class="demo-panel-title">Scrollbar</h3>
        <div id="demo" ng-controller="scrollbarCtrl" class="ui-scrollbar"
             ui-scrollbar wheel-propagation="true" wheel-speed="300"  style="height:200px;width:800px;">
            <div>
                <p>
                    The MIT License (MIT) Copyright (c) 2013, 2014 Drew Miller and other contributors.
                </p>
                <p>
                    Permission is hereby granted, free of charge, to any person obtaining a copy
                    of this software and associated documentation files (the "Software"), to deal
                    in the Software without restriction, including without limitation the rights
                    to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
                    of the Software, and to permit persons to whom the Software is furnished to do so,
                    subject to the following conditions:
                </p>
                <p>
                    Permission is hereby granted, free of charge, to any person obtaining a copy
                    of this software and associated documentation files (the "Software"), to deal
                    in the Software without restriction, including without limitation the rights
                    to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
                    of the Software, and to permit persons to whom the Software is furnished to do so,
                    subject to the following conditions:
                </p>
                <p>
                    Permission is hereby granted, free of charge, to any person obtaining a copy
                    of this software and associated documentation files (the "Software"), to deal
                    in the Software without restriction, including without limitation the rights
                    to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
                    of the Software, and to permit persons to whom the Software is furnished to do so,
                    subject to the following conditions:
                </p>
                <p>
                    Permission is hereby granted, free of charge, to any person obtaining a copy
                    of this software and associated documentation files (the "Software"), to deal
                    in the Software without restriction, including without limitation the rights
                    to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
                    of the Software, and to permit persons to whom the Software is furnished to do so,
                    subject to the following conditions:
                </p>
            </div>
        </div>
        <!--
            this is ui-gird demo
        -->
        <h3 class="demo-panel-title">Grid</h3>
        <div class="row">
            <div class="col-xs-12" ng-controller="gridCtrl">
                 <table class="ui-grid" 
                      ui-grid
                      items="gridData"
                      selected-items="ngGridModel"
                      total-items="total"
                      page-items="pagingOptions.pageSize"
                      dragable="true"
                      current-page="pagingOptions.currentPage"
                      on-data-required="onGridPager(currentPage,pageItems)"
                      selection-mode="None">
                  <thead>
                    <tr>
                        <th field-name="functionName" dragable="1" display-name="Funtion name"></th>
                        <th field-name="algo" display-name="Algo" dragable="1"></th>
                        <th field-name="dealNum" display-name="Deal Num" dragable="1"></th>
                        <th field-name="errorNum" display-name="Error Num" dragable="1"></th>
                    </tr>
                  </thead>
                  <tbody>
      
                  </tbody>
                </table>
            </div>
        </div>

         <!--
            this is ui-tree demo
        -->
        <h3 class="demo-panel-title">Tree</h3>
        <div class="row tree" ng-controller="treeCtrl">
            <button ng-click="openAll()">展开</button>
            <button ng-click="closeAll()">折叠</button>
            <button ng-click="add()">新增</button>
            <button ng-click="del()">新增</button>
            <h4>Custom Equality <small>(options.equality)</small></h4>
            {{selectedNode}}
            <div  ui-tree class="ui-tree tree-classic" tree-model="treedata1" options="opts" selected-node="selectedNode" expanded-nodes="expandedData" >
                label: {{node.name}} ({{node.age}})
            </div>

            <h4>Light Style <small>(Basic style, default configuration, add node)</small></h4>
            <div>
            <div  ui-tree class="ui-tree tree-classic" tree-model="treedata" options="opts"
                  on-selection="showSelected(node)">
                <button ng-click="buttonClick($event, node)">Click Me!</button>lable:{{node.label}}
            </div>
            <p>Selected node: <code>{{selectedNode?selectedNode.label:"N/A"}}</code></p>
            <p>Last clicked: <code>{{lastClicked ? lastClicked.label : "N/A"}}</code></p>
            <ul>
                <li><a ng-click="addRoot()">Add a new root</a></li>
                <li><a ng-click="addChildToSecondRoot()">Add a child to the 2nd node</a></li>
            </ul>
            </div>
            <h4>Selected Node Binding <small>(selected-node)</small></h4>
            <div  ui-tree class="ui-tree tree-classic" tree-model="treedata" options="opts"
                  selected-node="selected">
                  lable:{{node.label}}
            </div>
            <p><a ng-click="selectNode(0)">select node 1</a><br>
                <a ng-click="selectNode(1)">select node 2</a><br>
                <a ng-click="selectNode(2)">select node 3</a><br>
                <a ng-click="selectNode(3)">select node 4</a><br>
                <a ng-click="clearSelected()">clear Selected</a></p>
            <p>Selected node: <code>{{selected.label}}</code></p>
            <h4>Expanded Nodes Binding <small>(expanded-nodes)</small></h4>
            <div  ui-tree class="ui-tree tree-classic" tree-model="treedata" options="opts"
                  expanded-nodes="expandedNodes">
                lable:{{node.label}}
            </div>
            <p><a ng-click="setExpanded()">Expand 2, 3 and 3.3 (only)</a></p>
            <p>The currently expanded nodes:</p>
            <ul>
                <li ng-repeat="node in expandedNodes">{{node.label}}</li>
            </ul>
        </div>

        <!--
            this is ui-collapse demo
        -->
        <h3 class="demo-panel-title">Collapse</h3>
        <div class="row">
            <div class="col-xs-12" ng-controller="collapseCtrl">
                <button class="btn btn-default" ng-click="isCollapsed=!isCollapsed">Toggle collapse</button>
                <hr>
                <div collapse="isCollapsed">
                    <div class="well well-lg">Some content</div> 
                </div>
            </div>
        </div>
    </div>
</body>
</html>

